使用Flask和Vue.js实现前后端分离的全栈开发

您所在的位置：网站首页 › flask django vue › 使用Flask和Vue.js实现前后端分离的全栈开发

使用Flask和Vue.js实现前后端分离的全栈开发

#使用Flask和Vue.js实现前后端分离的全栈开发| 来源: 网络整理| 查看: 265

在工作中，我使用Vue.js有一年多了，因为Vue.js文档完善，上手简单，打包方便等诸多优势，所以是目前很流行的前端框架，本项目也选择Vue.js作为前端框架。对于后端，本项目选择的是比较好上手、轻量级的python后台框架：Flask。

我前前后后花了大概两周的时间，踩了很多坑，参考了很多博客，最终使用Flask + Vue.js + Vuetify-UI 实现了一个比较新颖的喵星君大大四柱八字排盘系统.，这篇文章接下来会将开发的步骤和代码一一展示出来，供大家参考，希望大家能少踩点坑。

一、使用Vue-cli搭建前端框架 1、安装vue-cli

如果之前安装过了vue，可以输入vue --version 来查看当前的vue版本是否是3.x以上的版本，如果返回的版本是旧版本 (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。

查看vue-cli版本的命令行

如果提示你vue命令无法识别，那么首先全局安装vue-cli，使用如下命令行：

全局安装vue-cli命令行

安装了最新版本的vue-cli之后，推荐使用vue ui命令以图形化界面创建和管理项目，输入vue ui会弹出一个Vue项目管理器界面。

输入vue ui命令，打开项目管理界面 2、创建Vue项目创建Vue项目界面

本项目在创建过程勾选了手动配置项目,勾选项如图所示，创建过程只需要根据图形化界面的引导完成创建。

勾选Babel，Router, Vuex, Linter配置项选择hash路由

在项目的详情页，就可以运行编译和热更新、启动以及打包你的前端代码了。

项目管理详情页 3、或者直接下载模板，快速启动项目

如果想利用现成的Vuetify UI组件模板快速建立Vue工程，也可以跳过上述步骤，直接下载Vuetify模块.

下载模板后，打开工程，输入命令：npm install，接着输入npm run dev，启动前端工程。

二、在Vue工程中增加页面及路由

找到router.js文件，在该文件增加两个前端页面的路由，

import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ // mode: 'history', // base: process.env.BASE_URL, routes: [ { path: '/', component: () => import('@/views/dashboard/Index') }, { name: 'Result', path: 'paipanResult', component: () => import('@/views/dashboard/paipanResult'), } ], })

在对应路径下增加两个新页面，其中默认首页为表单页，另一个为排盘结果展示页。由于采用前后端分离的开发方式，前端在制作页面时，如果后端接口还没能提供出来，可以先用一些初始化数据来代替。

三、创建Flask工程

新建一个文件名为index.py的python文件，与vue-project工程并列放置。

新建Flask文件存放路径

在index.py文件导入Flask相关包, 代码如图。

from flask import Flask, jsonify, request from flask_cors import CORS from pyfiles.flask_paipan import * # 从pyfiles文件夹导入已写好的python库 from ppbazi import pp app = Flask(__name__) # 通过Flask方法注册app，以后所有的route都是app开头 app.config.from_object(__name__) CORS(app, resources={r'/*': {'origins': '*'}}) # 跨域访问时使用，不跨域可将本行代码去掉 app.register_blueprint(pp,url_prefix='/paipan') @app.route('/api/submit', methods=['GET', 'POST']) # 提供接口，获取前端页面的提交的表单参数，通过调用其他文件写好的PaiPan函数，获得排盘结果，并以Json格式返回给前端页面 def submit(): response_object = {'status': 'success'} if requesthod == 'POST': post_data = request.get_json() year = post_data.get('year') month = post_data.get('month') day = post_data.get('day') hour = post_data.get('hour') minute = post_data.get('minute') sex = post_data.get('sex') city = post_data.get('city') birth = [year, month, day, hour, minute] exe = PaiPan(year, month, day, hour, minute, city, sex) truetime = exe.Sun_Time() bazi = exe.Paipan() qiyun = exe.Qi_yun() canggan = exe.CangGan() tengods = exe.Tengod() cg_tengods = exe.CangGan_TenGods() wangshuai = exe.WangS() context = { "sexArray": sex, "cityArray": city, "birthDay": birth, ... } response_object['context'] = context else: response_object['message'] = 'method is error' return jsonify(response_object) if __name__ == '__main__': app.run() 四、Blueprint（蓝图）路径的配置

在相同路径下，新建ppbazi.py的蓝图文件，配置蓝图指向，代码如下。

from flask import Blueprint,render_template,abort # render_template 指向的是templates文件夹 from jinja2 import TemplateNotFound pp = Blueprint("paipan",__name__,url_prefix="/paipan", template_folder='templates') @pp.route('/') def get_sample(): try: return render_template('index.html') except TemplateNotFound: abort(404) 五、Vue工程调用API接口

在表单提交页面引入axios 库，并输入命令行：npm install axios --save 进行安装。

接着编写submit方法，在点击按钮时，触发该方法，submit方法主要是通过axios调用上述步骤四完成的API接口，传入用户填写的表单数据，获取排盘结果的数据返回。

import axios from 'axios' submit(){ const url = ‘http://localhost:5000/api/submit' axios.post(url, { year: yymmddList[0], month: yymmddList[1], day: yymmddList[2], hour: hhmmssList[0], minute: hhmmssList[1], sex: this.sex, city: this.city, }) .then((response) => { console.log('responseData', response) this.$router.push({ name: 'Result' }) }) } 六、打包前端工程，并放入指定路径

在vue.config.js加入这几句导出路径代码

const path = require('path'); module.exports = { ... assetsDir: process.env.NODE_ENV === 'production'? '../static' : 'static', publicPath: process.env.NODE_ENV === 'production'? './' : '/', outputDir: path.resolve(__dirname, '../templates') }

接着输入命令行npm run build 对前端程序进行打包，最后的打包结果如图所示。

前端工程打包结果七、启动python程序，可访问系统

最后运行index.py程序，打开浏览器输入http://127.0.0.1:5000/paipan 即可进入网站。

在pycharm启动index.py程序

网站效果如图：

表单页排盘结果页

【本文地址】

使用Flask和Vue.js实现前后端分离的全栈开发

使用Flask和Vue.js实现前后端分离的全栈开发

今日新闻

推荐新闻